<template>
  <div class="project-task-list-view">


    <div class="left">

      <el-tree
        ref="tree"
        default-expand-all
        :expand-on-click-node="false"
        current-node-key="id"
        node-key="id"
        highlight-current
        :data="datas"
        :props="defaultProps"
        @node-click="handleNodeClick">
      </el-tree>

    </div>


    <div class="right">

      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="infomation">

          <details-view :datas="selectData" :project-name="projectName" :members="selectData.level == 1 ? members : people" @refreshData="refreshData" @selectNode="selectNode"></details-view>

        </el-tab-pane>
        <el-tab-pane label="工作计划" name="plan">
          <plan-view ref="plan" :datas="selectData" :project-id="projectId" :project-name="projectName"></plan-view>
        </el-tab-pane>
        <el-tab-pane label="任务问题" name="problem">
          <problem-view ref="problem" :datas="selectData" :project-id="projectId" :project-name="projectName"></problem-view>
        </el-tab-pane>
        <el-tab-pane label="任务文档" name="document">
          <task-document-view ref="document" :datas="selectData" :project-id="projectId"></task-document-view>
        </el-tab-pane>
      </el-tabs>

    </div>


  </div>
</template>

<script>
  import taskDocumentView from "./modules/taskDocumentView";
  import problemView from "./modules/problemView";
  import planView from "./modules/planView";
  import detailsView from "./modules/detailsView";
    export default {
        name: "index",
        components:{detailsView,planView,problemView,taskDocumentView},
        props:{
            datas:{
                type:Array,
                default:function () {
                    return []
                }
            },
            projectId:String,
            projectName:String,
            members:Array,
        },
        watch: {
            datas: {
                handler(newval,oldval){
                    if (newval && newval.length > 0){

                        this.selectData = newval[0];
                        // this.checkPostpone();
                    }
                },
                deep: true,
                immediate: true
            }
        },
        data:function () {
            return{
                defaultProps: {
                    children: 'children',
                    label: 'task_name'
                },
                selectData:{},
                activeName:'infomation',
                people:[],
            }
        },
        mounted:function(){

        },
        methods:{
            selectNode:function(data){
                this.$refs.tree.setCurrentKey(data.id)
                this.getTaskData(data.id,data.arr,data.member)
            },
            checkPostpone:function(){
                let date = new Date()
                let  startDate = Date.parse(this.selectData.end_date);
                let  endDate = date.getTime();

                if (startDate>endDate){
                    this.selectData.postpone = 0;
                }else if (startDate==endDate){
                    this.selectData.postpone = 0
                }else {
                    let num = ((endDate - startDate)/(1*24*60*60*1000)).toFixed(0)
                    this.selectData.postpone = Number(num);
                }
            },
            handleNodeClick(data,a,b) {
                let arr = [...data.persons]
                this.getTaskData(data.id,arr,a.parent.data.task_member)
                // this.checkPostpone();
            },
            getTaskData:function(id,arr,member){
                this.$api.PROJECT_START_TASK_DETAIL(id).then(res=>{
                    if (res.code == 200){
                        this.selectData = res.data;
                        this.selectData.persons = arr;
                        if (this.selectData.level != 1){
                            this.people = member
                        }
                        this.activeName = "infomation"
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            handleClick:function () {
                if (this.activeName == "plan"){
                    if (this.$refs.plan){
                        this.$refs.plan.getListData();
                    }
                }else if (this.activeName == "problem"){
                    if (this.$refs.problem){
                        this.$refs.problem.getListData();
                    }
                }else if (this.activeName == "document"){

                }
            },
            refreshData:function () {
                let arr = [...this.selectData.persons]
                this.$api.PROJECT_START_TASK_DETAIL(this.selectData.id).then(res=>{
                    if (res.code == 200){
                        this.selectData = res.data;
                        this.selectData.persons = arr;
                        this.selectData.startDate = this.dealDateStr(new Date(this.selectData.start_date));
                        this.selectData.endDate = this.dealDateStr(new Date(this.selectData.end_date));
                        if (this.selectData.level != 1){
                            this.people = a.parent.data.task_member
                        }
                        this.activeName = "infomation"
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            dealDateStr:function(date){
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                if (month < 10){
                    month = "0" + month
                }
                if (day < 10){
                    day = "0" + day;
                }

                return year + "-" + month + "-" + day
            },
        }
    }
</script>

<style lang="scss">
  @import "@/assets/scss/views/projectManagement/list/details/taskListView.scss";
</style>
